import { defineStore } from 'pinia';
import { computed, ref } from 'vue';
import { THEME_LIGHT, THEME_DARK, THEME_SYSTEM } from '@/constants/theme';

type ThemeType = typeof THEME_LIGHT | typeof THEME_DARK | typeof THEME_SYSTEM;

const useThemeStore = defineStore(
  'theme',
  () => {
    const themeType = ref<ThemeType>(THEME_LIGHT);

    const themeTypeGetter = computed(() => themeType);

    const changeThemeType = (newTheme: ThemeType) => {
      themeType.value = newTheme;
    };

    return {
      themeType,
      themeTypeGetter,
      changeThemeType
    };
  },
  {
    persist: [
      {
        pick: ['themeType'],
        storage: localStorage
      }
    ]
  }
);

export default useThemeStore;
